{{define "Littlewin/side"}}
<aside class="side">
    <aside class="module--bottom">
        <div id="player"></div>
    </aside>

    {{template "Littlewin/module-list" dict "List" .MostCommentArticles "Title" .I18n.MostCommentArticle "UserCount" .UserCount}}
    {{template "Littlewin/module-list" dict "List" .MostViewArticles "Title" .I18n.MostViewArticle "UserCount" .UserCount}}
    <div class="module module--bottom">
        <div class="module__header fn__flex-center">
            <svg>
                <use xlink:href="#iconBar"></use>
            </svg>
            {{.I18n.Tags}}
        </div>
        <div class="module__tags module--space fn__clear">
            {{range .MostUseTags}}
            <a href="{{.URL}}">{{.Title}}</a>
            {{end}}
        </div>
    </div>
    {{if gt (len .MostUseCategories) 0}}
    <div class="module module--bottom">
        <div class="module__header fn__flex-center">
            <svg>
                <use xlink:href="#iconBar"></use>
            </svg>
            {{.I18n.Categories}}
        </div>
        <div class="module__tags module--space fn__clear">
            {{range .MostUseCategories}}
            <a href="{{.URL}}">{{.Title}}</a>
            {{end}}
        </div>
    </div>
    {{end}}
    {{if gt (len .RecentComments) 0}}
    <div class="module module--bottom">
        <div class="module__header fn__flex-center">
            <svg>
                <use xlink:href="#iconBar"></use>
            </svg>
            {{.I18n.RecentComment}}
        </div>
        <div class="module--space">
            {{range .RecentComments}}
            <div class="module__cmt{{if eq .Author.Name $.BlogAdmin.Name}} module__cmt--left{{end}} fn__flex-center">
                <a class="avatar avatar--mid pipe-tooltipped pipe-tooltipped--n"
                   href="{{.Author.URL}}"
                   aria-label="{{.Author.Name}}"
                   data-src="{{.Author.AvatarURLWithSize 74}}"></a>
                <a href="{{.URL}}" class="module__cmt-con">{{.Title}}</a>
            </div>
            {{end}}
        </div>
    </div>
    {{end}}
</aside>
{{end}}
